<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="back-button" @click="goBack">
        <span class="arrow">←</span>
        <span class="back-text">食物记录</span>
      </div>
    </div>
    
    <!-- 早餐记录标题 -->
    <div class="record-title">2025.10.20早餐记录</div>
    
    <!-- 食物记录列表 -->
    <div class="food-list">
      <div
        class="food-item"
        v-for="food in breakfastFoods"
        :key="food.id"
      >
        <div class="food-image"></div>
        <div class="food-info">
          <div class="food-name">{{ food.name }}</div>
          <div class="food-quantity">{{ food.quantity }}</div>
        </div>
      </div>
    </div>
    
    <!-- 添加食物按钮 -->
    <div class="add-button">
      <button @click="addFood">+</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'FoodRecord',
  setup() {
    const breakfastFoods = ref([
      { id: 1, name: '豆浆', quantity: '1.0杯' },
      { id: 2, name: '鸡蛋', quantity: '1.0个' },
      { id: 3, name: '包子', quantity: '2.0个' },
      { id: 4, name: '苹果', quantity: '1.0个' }
    ]);
    
    // 添加食物
    const addFood = () => {
      const newId = breakfastFoods.value.length > 0 
        ? Math.max(...breakfastFoods.value.map(item => item.id)) + 1 
        : 1;
      
      breakfastFoods.value.push({
        id: newId,
        name: '新食物',
        quantity: '1.0个'
      });
    };
    
    // 返回按钮点击事件
    const goBack = () => {
      window.history.back();
    };
    
    return {
      breakfastFoods,
      addFood,
      goBack
    };
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  background-color: white;
  height: 100vh;
  padding-bottom: 60px;
  margin: 0;
  padding: 0;
}

/* 顶部导航栏样式 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.arrow {
  font-size: 20px;
  margin-right: 5px;
}

.back-text {
  font-size: 16px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
}

/* 记录标题样式 */
.record-title {
  background-color: #e6f2ff;
  padding: 15px;
  margin: 15px;
  border-radius: 15px;
  text-align: center;
}

/* 食物列表样式 */
.food-list {
  padding: 0 15px;
}

.food-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}

.food-image {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.food-info {
  text-align: left;
  flex: 1;
}

.food-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.food-quantity {
  color: #666;
  font-size: 14px;
}

/* 添加按钮样式 */
.add-button {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.add-button button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #d0e1f9;
  border: none;
  font-size: 30px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>